<template>
	<view class="content">
		<view class="index">
			<u-navbar back-text="" leftIconColor="#ffffff" slot="center" :autoBack="true" safeAreaInsetTop placeholder>
			 	<view slot="center" class="leftText"></view>
			</u-navbar>
		</view>
		<view class="sendTitle">
			<view>发布名片</view>
			<!-- <view @click="navmingpian()">前往发布好活<u-icon name="arrow-right" color="#fff" size="14"></u-icon></view> -->
		</view>
		<view class="release">
			
			<u--form
				labelPosition="left"
				:model="form"
				:rules="rules"
				ref="form1"
				:labelStyle="{'font-size':'28rpx','color':'#424242'}"
			>
				<u-form-item label="请选择期望地点" labelWidth="110" prop="userInfo.range" borderBottom @click="cleanAddresIndex" >
					<u--input 
						v-model="formData.hopeAddrName" 
						fontSize="14" 
						readonly 
						disabledColor="#0F0F0F" 
						inputAlign="right"  
						border="none" 
						placeholder="请选择"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="您找活的工种"labelWidth="100" prop="userInfo.range" borderBottom @click="checkNavGongZhong">
					<u--input 
						v-model="formData.skillsName" 
						fontSize="14" 
						readonly  
						disabledColor="#0F0F0F" 
						inputAlign="right"  
						border="none" 
						placeholder="请选择"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="人员构成" labelWidth="100" prop="userInfo.range" borderBottom 
					@click="checkperson()">
					<u--input
						v-model="formData.staffTypeName" 
						fontSize="14" 
						readonly  
						disabledColor="#0F0F0F" 
						inputAlign="right"  
						border="none" 
						placeholder="请选择"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="熟练度" fontSize="12" readonly labelWidth="100" 
					prop="userInfo.range" borderBottom @click="checkmastery()">
					<u--input
						v-model="formData.masteryName" 
						fontSize="14" 
						readonly  
						disabledColor="#0F0F0F" 
						inputAlign="right"  
						border="none" 
						placeholder="请选择"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="自我介绍" fontSize="12" readonly labelWidth="100" prop="userInfo.range"></u-form-item>
				<view style="background: #f3f3f3;">
					<u-textarea v-model="formData.notice"  height="120" maxlength="400"
					placeholder="请输入工作内容" 
					count border="none"></u-textarea>
				</view>
				<!-- <u-form-item label="自我介绍" fontSize="12" readonly labelWidth="100" prop="userInfo.range" borderBottom>
					<u--input
						v-model="formData.notice" 
						fontSize="14" 
						disabledColor="#0F0F0F" 
						inputAlign="right"  
						border="none" 
						placeholder="填写内容"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item> -->
				
			</u--form>
			<!-- <view class="perfect" @click="sendCard(3)">
				<view>录入完善的招工信息将会更快招到合适的师傅</view>
				<view class="perfectIcon">
					<u-icon name="play-right-fill" label="去完善" labelPos="left" labelColor="#0575FF" labelSize="14" color="#0575FF" size="12"></u-icon>
				</view>
			</view> -->
			<view class="agreement">发布信息即遵守<text  @click="openDoc(3)">《天下工人信息发布规则》</text>，如果违反规则 可能导致您的账号异常</view>
			<view class="relBut" v-if="isPublish == 0">
				<!-- <view  @click="sendCard(1)">置顶发布</view> -->
				<view @click="sendCard(0)">发布名片</view>
			</view>
			<view class="relBut" v-if="isPublish == 1">
				<view  @click="sendCard(0)">刷新名片</view>
				<!-- <view @click="sendCard(1)"> 置顶发布</view> -->
			</view>
		</view>
		<!-- <view style="min-height:270rpx;background-color: #efefef;">
			<view class="sanjiao-out poser">
				<view class="sna"></view>
				<view class="sanjiao-line"></view>
			</view>
			<view class="v-box dis-row" style="padding-top: 60rpx;">
				<view class="out-btn" @click="navmingpian">免费发布好活</view>
				<view class="out-btn" >免费发布名片</view>
			</view>
		</view> -->
		<!--地址-->
		<pop ref="city" :direction="direction" :is_close="true" :is_mask="true" :width="100">
		     <view class="con-del dis-clm" v-if="cityList && cityList.length>0">
				 <view class="cityName">选择地点</view>
				 <view class="checkgongzhongLList row-box" v-if="selectCity.length>0">
					<view v-for="(se,sc) in selectCity" :key="sc" class="dis-row" @click="delSelectCity(se,sc)">
					<text>{{se.name}}</text><label><image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/cc.png"></image></label>
					</view>
				 </view>
				 <view class="cityList dis-row">
				 	<view class="sheng dis-clm">
				 		<scroll-view scroll-y="true">
				 			<view class="sheng-Lst" 
							v-for="(cityitem,cityindex) in provinceList" 
							:key="cityindex" 
							:class="{'shengActive':(cityitem.active==1)}"
							@click="cityClick(cityitem,cityindex,1)"
							>{{cutstr(cityitem.name,10)}}</view>
				 		</scroll-view>
				 	</view>
				 	<view class="shi dis-clm">
						<scroll-view scroll-y="true">
							<view class="shi-lst" v-for="(shiItem,shiIndex) in cityList" 
							:key="shiIndex"
							:class="{'shiActive':(shiItem.active==1)}"
							@click="cityClick(shiItem,shiIndex,2)"
							>{{cutstr(shiItem.name,10)}}</view>
						</scroll-view>
					</view>
				 	<!-- <view class="qu dis-clm">
						<scroll-view scroll-y="true">
							<view class="qu-lst" v-for="(quitem,quindex) in countyList" :key="quindex"
							:class="{'quActive':(quitem.active==1)}"
							@click="cityClick(quitem,quindex,3)"
							>{{cutstr(quitem.name,10)}}</view>
						</scroll-view>
					</view> -->
				 </view>
				 
				<view class="addres-footer dis-row">
					 <view class="addres-btn" @click="cleanNew">清除</view>
					 <view class="addres-btn" @click="citySure">确定选择</view>
				 </view>
			 </view>
		</pop>
		
		<!--全部工种-->
		<pop ref="gongzhong" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			 <view class="con-del dis-clm">
				 <view class="cityName">全部工种</view>
				 <view class="checkgongzhongLList row-box" v-if="selectCheckgognzhong.length>0">
					 <view v-for="(se,sc) in selectCheckgognzhong" :key="sc" class="dis-row" @click="delSelectgz(se,sc)">
						 <text>{{se.skillName}}</text><label><image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/cc.png"></image></label>
					 </view>
				 </view>
				 <view class="cityList dis-row">
				 	<view class="sheng dis-clm">
				 		<scroll-view scroll-y="true">
				 			<view class="sheng-Lst" v-for="(gzitem,gzindex) in gongzhongList" 
								:key="gzindex" 
								:class="{'shengActive':(gzlevelone==gzindex)}"
								@click="gzTaskLevelone(gzitem,gzindex)">
								{{cutstr(gzitem.skillName,10)}}
							</view>
				 		</scroll-view>
				 	</view>
				 	<view class="shi dis-clm" v-if="gongzhongList[gzlevelone] && gongzhongList[gzlevelone].children">
						<scroll-view scroll-y="true">
							<view class="shi-lst" v-for="(shiItem,shiIndex) in gongzhongList[gzlevelone].children" 
							:key="shiIndex"
							:class="{'shiActive':(gzleveltwo === shiIndex)}"
							@click="gzTaskLevelTwo(shiItem,shiIndex)"
							style="width: 400rpx;"
							>
								{{shiItem.skillName}}
							</view>
						</scroll-view>
					</view>
			
				 </view>
				 <view class="addres-footer dis-row">
					 <view class="addres-btn" @click="cleanGongZhongIndex">清除</view>
					 <view class="addres-btn" @click="getCheckGongZhong">确定选择</view>
				 </view>
			 </view>
		</pop>
		
		<!--人员构成-->
		<pop ref="person" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			<view class="popOption">
				<view class="title">人员构成</view>
				<view class="option">
					<view
						v-for="(uv,ui) in personList" 
						:key="ui" 
						:class="{'active':formData.staffType === uv.id}" 
						@click="personChange(uv)">{{uv.name}}</view>
				</view>
				<!-- <view class="define">
					<view @click="personDefine()">确定</view>
				</view> -->
			</view>
		</pop>
		
		<!--熟练度-->
		<pop ref="mastery" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			<view class="popOption">
				<view class="title">熟练度</view>
				<view class="option">
					<view
						v-for="(uv,ui) in masteryList" 
						:key="ui" 
						:class="{'active':formData.mastery === uv.id}" 
						@click="masteryChange(uv)">{{uv.name}}</view>
				</view>
				<!-- <view class="define">
					<view @click="masteryDefine()">确定</view>
				</view> -->
			</view>
		</pop>
	</view>
</template>
<script>
	import store from '@/common/store.js'
	import Index from '@/common/index-model.js'
	import pop from "@/components/ming-pop/ming-map.vue"
	let index=new Index();
	let that = null;
	export default {
		data() {
			return {
				cityLists:[],
				provinceList:[],
				cityList:[],
				countyList:[],
				selectCity:[],
				selectCheckgognzhong:[],
				gongzhongList:{},
				gzlevelone:0,
				gzleveltwo:'',
				personList:[],//人员构成
				masteryList:[],//熟练度
				formData:{
					hopeAddrIds:'',
					hopeAddrName:'',
					skillsId:'',
					skillsName:'',
					staffType:'',
					staffTypeName:'',
					mastery:'',
					masteryName:'',
					notice:''
				},				
				direction:'below',
				rules:{},
				isperson:false,//人员构成
				isProficiency:false, //熟练度
				personList:[], //人员构成列表
				ProficiencyList:[], //熟练度列表
				myCard:{},
				isPublish:0
			}
		},
	components:{
			pop
		},
		onLoad(opt) {
			that = this;
			if(opt.addres){
				//console.log(opt,'===opt===')
				let lons= JSON.parse(opt.addres)
				this.addressget = JSON.parse(opt.addres) //临时缓存数据
				this.form.objAddress=lons.cityName+lons.addressName
				this.addressobj = {
					provinceId:lons.provinceId,
					cityId:lons.cityId,
					areaId:lons.areaId,
					lat:lons.lat,
					lon:lons.lon,
					addressName:lons.addressName
				}
			}
			this.getQueryType();
			this.getCityList();
			this.getMasteryList();
			this.getPersonList();
			this.getCardDetail();
		},
		methods: {
			openDoc(type){
				index.navigate_to('/pagesC/login/xieyi?type='+type)
			},
			// openDoc(type) {
			// 	index.navigate_to('/pagesC/doc/index?type='+type);
			// },
			navmingpian() {
				let url="../../pagesC/release/index"
				index.navigate_to(url)
			},
			getCardDetail(){
				index.getPublicUserMember({},'client/card/detail','get',res=>{
					if(res.data.code == 200 && res.data.success){
						let data=res.data.result;
						this.formData.hopeAddrIds=data.hopeAddrIds?index.strTrim(data.hopeAddrIds,','):'';
						this.formData.hopeAddrName=data.hopeAddr?this.strHandle(data.hopeAddr,','):'';
						this.formData.skillsId=data.skillsId?index.strTrim(data.skillsId,','):'';
						this.formData.skillsName=data.skills?this.strHandle(data.skills,','):'';
						this.formData.staffType=data.staffType;
						this.formData.staffTypeName=data.staffTypeStr;
						this.formData.mastery=data.mastery;
						this.formData.masteryName=data.masteryStr;
						this.formData.notice=data.notice;
						this.isPublish = data.isPublish
					}
				})
			},
			//获取人员构成
			getPersonList() {
				index.getPublicUserMember({},'client/public/find/staff','get',res=>{
					if(res.data.code == 200 && res.data.success){
						this.personList=res.data.result;
					}
				})
			},
			checkperson(){
				this.$refs.person.show();
			},
			personChange(item){
				this.formData.staffType=item.id;
				this.formData.staffTypeName=item.name;
				this.$refs.person.close();
			},
			personDefine(){
				this.$refs.person.close();
			},
			//获取熟练度
			getMasteryList() {
				index.getPublicUserMember({},'/client/public/find/mastery','get',res=>{
					if(res.data.code == 200 && res.data.success){
						this.masteryList=res.data.result;
					}
				})
			},
			checkmastery(){
				this.$refs.mastery.show();
			},
			masteryChange(item){
				this.formData.mastery=item.id;
				this.formData.masteryName=item.name;
				this.$refs.mastery.close();
			},
			masteryDefine(){
				this.$refs.mastery.close();
			},
			//获取省市区数据列表
			getCityList() {
				index.getPublicUserMember({},'client/public/find/areaList','get',res=>{
					console.log('获取城市列表数据',res.data)
					if(res.data.code == 200 && res.data.success){
						let cityList=res.data.result;
						let province=[];
						cityList.forEach((item,index)=>{
							if(item.pid==0){
								item.active=0;
								let city=[];
								cityList.forEach((t,ti)=>{
									if(t.pid==item.id){
										t.active=0;
										let county=[];
										cityList.forEach((th,tc)=>{
											if(th.pid==t.id){
												th.active=0;
												county.push(th);
											}
										})
										t.child=county;
										city.push(t);
									}
								})
								item.child=city;
								province.push(item);
							}
						});
						this.cityLists=province;
						province[0].active=1;
						this.provinceList=province;
						this.cityList=province[0].child;
						this.countyList=province[0].child[0].child;
					}
				})
			},
			cityClick(item,inx,type){
				if(type===1){
					this.cityList=item.child;
					this.countyList=item.child[0].child;
					this.provinceList.forEach((v,i)=>{
						if(v.active==1){
							this.provinceList[i].active=0;
						}
					})
					this.provinceList[inx].active=1;
				}else if(type===2){
					this.countyList=item.child;
					if(this.selectCity.length>=3){
						index.show_tips('城市选择不能超过3个');return false;
					}
					let cs=this.selectCity.filter((cc)=>cc.id==item.id);
					if(!cs[0]){
						this.selectCity.push(item);
					}
					this.cityList[inx].active=1;
				}else if(type===3){
					this.countyList.forEach((v,i)=>{
						if(v.active==1){
							this.countyList[i].active=0;
						}
					})
					this.countyList[inx].active=1;
				}
			},
			//移除选中的工种
			delSelectCity(se,sc) {
				if(this.selectCity.length>0){
					this.selectCity.splice(sc,1)
					//delete this.selectCheckgognzhong[sc]
				}
			},
			cleanAddresIndex() {
				if(uni.getStorageSync('token')){
					this.$refs.city.show()
				}else{
					index.show_tips('请先登录')
					setTimeout(()=>{
						index.redirectto('../../pagesC/login/login')
					},300)
					return false
				}
				
			},
			//清除选中的地址
			cleanNew() {
				this.hopeAddrIds='';
				this.hopeAddrName='';
				this.$refs.city.close()
			},
			citySure(){
				let hopeAddrIds='',hopeAddrName='';
				this.selectCity.forEach((v,i)=>{
					hopeAddrIds+=v.id+',';
					hopeAddrName+=v.name+',';
				})
				if(!hopeAddrIds || !hopeAddrName){
					index.show_tips('请选择省市区')
					return false
				}				
				this.formData.hopeAddrIds=index.strTrim(hopeAddrIds,',');
				this.formData.hopeAddrName=this.strHandle(hopeAddrName,',');
				this.$refs.city.close();
			},
			//发布好活
			sendCard(value) {
				console.log(value);
				uni.showLoading({
					title: '加载中,请稍后'
				});
				if(!this.formData.hopeAddrIds){
					index.show_tips('请选择期望地点')
					return false
				}
				if(!this.formData.skillsId){
					index.show_tips('请先选择工种')
					return false
				}
				if(!this.formData.staffType){
					index.show_tips('请先选择人员构成')
					return false
				}
				if(!this.formData.mastery){
					index.show_tips('请先选择熟练度')
					return false
				}
				if(this.formData.notice == '' || !this.formData.notice){
					index.show_tips('请填写自我介绍')
					return false
				}
				index.getPublicUserMember(this.formData,'/client/card/modify','post',res=>{
					if(res.data.code == 200 && res.data.success){
						if(value==3){
							uni.hideLoading();
							setTimeout(()=>{
								index.redirectto('../perfectWork/index')
							},500)
						}else if(value==1){
							setTimeout(()=>{
								index.redirectto('/pagesC/mpTop/index?id=' + this.topId)
							},500)
						}else{
							index.show_tips('名片发布成功')
							setTimeout(()=>{
								index.switch_tab('/pages/worker/index')
							},2000)
						}
					}else{
						index.show_tips(res.data.message);
						return false
					}
				})
			},
			
			//跳转到选择工种页面
           checkNavGongZhong() {
			   this.$refs.gongzhong.show();
			   return false;
		   },
          //查询工种
          getQueryType() {
          	let types= "construction"
          	this.Qurylist = []
          	index.getPublicMember({},'client/skills/listV2/'+types,'get',res=>{
          		if(res.data.success && res.data.code == 200){
					
          			let arr = res.data.result
          			let gzarr=[];
          			if(arr.length>0){
          				for(let i=0;i<arr.length;i++){
          					if(arr[i].slevel == 1){
          						this.Qurylist.push({name:arr[i].skillName,id:arr[i].id})
          						gzarr.push(arr[i]);
          					}
          				}
          				//console.log(gzarr,'=====gzarr====gzarr')
          				//把三级工种压到二级工种里面
          				// if(gzarr.length>0){
          				// 	for(let j=0;j<gzarr.length;j++){
          				// 		gzarr[j].child = []
          				// 		for(let m=0;m<arr.length;m++){
          				// 			if(arr[m].pid == gzarr[j].id && arr[m].slevel == 3){
          				// 				gzarr[j].child.push(arr[m])
          				// 			}
          				// 		}
          				// 	}
          				// }
          				this.gongzhongList = gzarr;
          			}else{
          				this.gongzhongList=[]
          			}
          		}else{
          			this.Qurylist = []
          			this.gongzhongList = []
          		}
          	})
          },
		  //点击工种二级类型 切换下标
		  gzTaskLevelone(item,gzindex) {
		  	this.gzlevelone = gzindex;
			this.gzleveltwo = '';
		  },
		  //切换三级工种 类型 下标
		  gzTaskLevelTwo(item,gzindex) {
				this.isclickgztwo = true;
				if(this.selectCheckgognzhong.length >= 3){
					index.show_tips('所选工种不能超过3个')
					return false
				}else{
					let cs=this.selectCheckgognzhong.filter((cc)=>cc.id==item.id);
					if(!cs[0]){
						this.selectCheckgognzhong.push(item);
					}
					this.gzleveltwo=gzindex;
				}
		  },
		  //移除选中的工种
		  delSelectgz(se,sc) {
		  	if(this.selectCheckgognzhong.length>0){
		  		this.selectCheckgognzhong.splice(sc,1)
		  		//delete this.selectCheckgognzhong[sc]
		  	}
		  },
		  //清空选中的工种
		  cleanGongZhongIndex() {
		  	this.gzlevelone = 0
		  	this.gzleveltwo = 0
		  	this.selectCheckgognzhong = []
			this.form.objType = ''
		  	//this.$refs.gongzhong.close()
		  },
			//确定选中的工种进行查询
			getCheckGongZhong() {
				if(this.selectCheckgognzhong.length == 0){
					index.show_tips('请先去选择要查询的工种')
					return false
				}
				let skillsId='',skillsName='';
				this.selectCheckgognzhong.forEach((item,index)=>{
					skillsId+=item.id+',';
					skillsName+=item.skillName+',';
				})
				this.formData.skillsId=index.strTrim(skillsId,',');
				this.formData.skillsName=this.strHandle(skillsName,',');
				this.$refs.gongzhong.close();
			},
			cutstr(str, len) {
				var str_length = 0;
				var str_len = 0;
				var str_cut = new String();
				str_len = str.length;
				for (var i = 0; i < str_len; i++) {
					var a = str.charAt(i);
					str_length++;
					if (escape(a).length > 4) {
						//中文字符的长度经编码之后大于4  
						str_length++;
					}
					str_cut = str_cut.concat(a);
					if (str_length >= len) {
						str_cut = str_cut.concat("...");
						return str_cut;
					}
				}
				//如果给定字符串小于指定长度，则返回源字符串；  
				if (str_length < len) {
					return str;
				}
			},
			strHandle(str,char=','){
				str=index.strTrim(str,char);
				return index.strRep(str,',','、');
			}
		}
	}
</script>
<style>
	.u-textarea.data-v-09988a29{ background: none!important;}
</style>
<style lang="scss" scoped>
@import url("index.css");
@import url("@/static/css/publics.css");
::v-deep {
  .u-navbar--fixed {	  
	 // background-image: url('http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/worktop.png');
	  background-size: 100%;
	  background: #0575FF;
	  background-repeat: no-repeat;
    // background-image: linear-gradient(to bottom, #42cdff, #0288ff);
    & > view {
      background: transparent !important;
    }
    .leftText {
      color: #000;
    }
  }
}

.content{
	//background-image: url('http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/worktop.png');
	background-size: 100%;
	background-repeat: no-repeat;
}
.release{
	margin-top: 40rpx;
	padding: 0 20rpx;
	.relTitle{
		font-size: 36rpx;
		font-weight: bold;
		color: #3D3D3D;
		font-family: PingFang SC-粗体;
	}
	.relInput{ 
		margin-bottom: 52rpx;
		border-bottom: 1px solid #D8D8D8;
		position: relative;
		.inputs{ 
			padding: 6rpx 0rpx;
		}
	}
	.inp image{ width: 32rpx;height: 32rpx; position: absolute; right: 0; top: 16rpx;}
	.perfect{
		background: #E4F0FF; 
		border-radius: 6rpx;
		height: 64rpx;
		padding: 0rpx 14rpx;
		position: relative;
		margin-bottom: 42rpx;
		margin-top: 42rpx;
		view:nth-child(1){
			height: 64rpx;
			line-height: 64rpx;
			font-size: 24rpx;
			position: absolute;
			padding-left: 14rpx;
			left: 0;
			color: #424242;
		}
		.perfectIcon{
			width:140rpx;
			position: absolute;
			//#ifdef MP-WEIXIN
			right: 20rpx;
			top: 20rpx;
			//#endif
			//#ifdef APP-PLUS
			right: 0rpx;
			top: 0rpx;
			//#endif
		}
	}
	.agreement{
		color: #A1A1A1;
		font-size: 24rpx;
		line-height: 30rpx;
		text-align: center;
		margin-bottom: 30rpx;
		text{
			color:#0575FF;
		}
	}
	.relBut{
		padding-bottom: 60rpx;
		display: flex;
		view:nth-child(1){
			flex: 1;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			background: #E4F0FF;
			color: #0575FF;
			border-radius: 6rpx;
			margin-right: 22rpx;
		}
		view:nth-child(2){
			flex: 1;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			background: #0575FF;
			color: #fff;
			border-radius: 6rpx;
		}
	}
}

</style>